<template>
	<view class="line uni-row uni-between mt-5">
		<!-- 时间 -->
		<view style="display: flex;">
			<text class="time">{{ formattedDate }}</text>
			<view class="comment-icon">
				<uni-icons type="trash" size="16" @click="handleDelete()" v-if="userId == user_id"></uni-icons>
			</view>
		</view>
		<!-- 点赞/评论按钮 -->
		<view class="icon uni-row uni-center" id="commentIcon" @click="showComment">
			<text class="dot mr-5"></text>
			<text class="dot"></text>
		</view>
	</view>
</template>
postsDeleted
<script>
    import * as FindApi from '@/api/find'
	import store from '@/store/index.js'
	export default {
		props: {
			// 获取滚动的高度
			scrollTop:{
				type: Number,
				default: 0
			},
			//帖子id
			id: {
				type: Number,
				default: 0
			},
			createdAt:{
				type: Number,
				default: 0
			},
			userId:{
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				keyboardStatus: false,
				user_id: null
			}
		},
		computed: {
		  formattedDate() {
		    const date = new Date(this.createdAt * 1000);
		    const year = date.getFullYear();
		    const month = String(date.getMonth() + 1).padStart(2, '0');
		    const day = String(date.getDate()).padStart(2, '0');
		    const hours = String(date.getHours()).padStart(2, '0');
		    const minutes = String(date.getMinutes()).padStart(2, '0');
		    const seconds = String(date.getSeconds()).padStart(2, '0');
		    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		  }
		},
		mounted() {
			console.log('store.getters.userId', store.getters.userId)
			this.user_id = store.getters.userId
		},
		methods: {
			showComment() {
				let app = this
				this.$nextTick(() => {
					let commentIcon = null; // 获取子组件实例
					const query = uni.createSelectorQuery().in(this).select('#commentIcon');
					   query.boundingClientRect((data) => {
						console.log("得到布局位置信息line" + JSON.stringify(data));
						if (data) {
							uni.$emit('showCommentPopup', {top: data.top + this.scrollTop, id: this.id, at_id: 0});
						}
					  }).exec();
				})
			},
			// 删除
			handleDelete(val) {
				const app = this
				console.log('帖子id', this.id)
				// 弹窗告诉用户去登录
				uni.showModal({
				  title: '提示',
				  content: '是否确定删除？',
				  // showCancel: false,
				  confirmText: "确定",
				  cancelText: "取消",
				  success: res => {
					 if (res.confirm) {
						 FindApi.postsDeleted({
							id: app.id
						 }).then(result => {
							console.log(result, '删除')
							uni.$emit('RefreshList', true); // 评论列表
							app.$toast(result.message)
						 }).catch(() => {
							
						 })
					 } else {
					 	app.$toast('删除取消')
					 }
				  },
				  fail: err => {
				  	console.log('删除失败')
				  }
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.line {
		position: relative;
		z-index: 996;
	}
	
	.time {
		color: #999;
		font-size: 24rpx;
	}
	.comment-icon{
		margin-left: 16rpx;
	}
	.icon {
		background-color: #eee;
		border-radius: 6rpx;
		width: 70rpx;
		height: 40rpx;
		
		.dot {
			width: 10rpx;
			height: 10rpx;
			border-radius: 12rpx;
			background-color: #999;
		}
	}
</style>